<template>
  <div>
    <div ref="cnxl" style="height:20vh;" />
  </div>
</template>

<script>
import { bnrQuery } from '../../api/dataApi'

export default {
  data() {
    return {
      personD: [],
      psname: '',
      colorList: ['#eee15f', '#0393f3', '#09f2ed', '#0ce889'],
      data: [],
    }
  },

  watch: {
    personD: {
      data() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
    // psname(val) {
    //   this.getData(val)
    // },
  },
  mounted() {
    this.getData()

    //需要执行的代码
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@prod_cnxl'
      header['cj'] = this.$route.query.cj
      const params = {
        '@params': JSON.stringify(header),
        _condition: {},
        pageIndex: 0,
        sortField: '',
        sortOrder: '',
      }
      bnrQuery(params)
        .then((res) => {
          this.data = res.data ? res.data : []
          this.initChart()
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
    },

    initChart() {
      const myChart = this.$echarts.init(this.$refs.cnxl)
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#05358b',
            },
          },
          axisLabel: {
            formatter: '{value}',
            color: '#eee',
            fontSize: this.fitChartSize(10),
            interval: 0,
            rotate: 30,
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value}',
            color: '#ccc',
            fontSize: this.fitChartSize(10),
          },
        },
        grid: {
          top: '10%',
          bottom: '15%',
          left: '10%',
          // right: '8%',
          // left: '10%',
        },
        series: [
          {
            data: this.data,
            type: 'line',
            label: {
              
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7bfffc ' },
                { offset: 1, color: '#09f2ed' },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
